<!-- 角色编辑弹窗 -->
<template>
  <el-drawer :visible="drawerEditBoolen"
             size="50%"
             :before-close="handleClose"
             ref="drawer">
    <template v-slot:title>
      <span class="hLabel">{{
        isUpdate ? '修改公告配置' : '添加公告配置'
      }}</span>
    </template>
    <div class="ele-body">
      <el-card shadow="never">
        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 :rules="rules">
          <el-form-item label="标题:"
                        prop="title">
            <el-input clearable
                      :maxlength="100"
                      v-model="form.title"
                      placeholder="请选择标题">
            </el-input>
          </el-form-item>
          <el-form-item label="排序值:"
                        prop="sort">
            <span slot="label">
              排序值
              <el-tooltip placement="top">
                <div slot="content"> 用于前端展示排序， 值越大排在前面 </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <el-input clearable
                      type="number"
                      step="1"
                      v-model="form.sort"
                      placeholder="请输入排序值" />
          </el-form-item>

          <el-form-item label="展示状态:"
                        prop="showStatus">
            <el-switch v-model="form.showStatus"
                       active-value="1"
                       inactive-value="2">
            </el-switch>
          </el-form-item>
          <!-- 提交图片 -->
          <el-form-item label="内容:"
                        prop="content">
            <tinymce-editor v-model="form.content"
                            :init="{ height: 525 }" />
          </el-form-item>
        </el-form>
        <div class="drawer__footer">
          <el-button round
                     type="plain"
                     @click="handleClose"
                     size="medium">返回</el-button>
          <el-button type="primary"
                     round
                     size="medium"
                     :loading="loading"
                     @click="save">提交</el-button>
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>

<script>
import { getToken } from '@/utils/token-util';
import {
  userOssSignature,
  qnyOssSignature
} from '@/api/creatCenter/material';
// 要引入组件
import TinymceEditor from '@/components/TinymceEditor/index.vue';

import axios from 'axios';
import {
  siteNoticeList,
  siteNoticeModify,
  siteNoticeInsert,
  siteNoticeDetail,
  siteNoticeDelete
} from '@/api/basicConfiguration/homepage/noticeConfiguration/index.js';

export default {
  name: 'pictureEdit',
  components: { TinymceEditor },
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  data () {
    const DEFAULT_FORM = {
      // 标题
      title: '',
      // 内容
      content: '',
      // 排序号
      sort: '',
      // 是否展示状态
      showStatus: 1,
      // 站点id
      siteId: this.$store.state.site.info.id
    };
    return {
      options: [],
      imageUrl: '',

      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序值',
            trigger: 'blur'
          }
        ],
        showStatus: [
          {
            required: true,
            message: '请输入是否展示状态',
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入公告内容',
            trigger: 'blur'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false
    };
  },
  methods: {
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolen', false);
    },

    /* 保存编辑 */
    save () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        const data = {
          ...this.form
        };
        console.log(data);
        this.loading = true;

        const saveOrUpdate = this.isUpdate
          ? siteNoticeModify
          : siteNoticeInsert;
        saveOrUpdate(data)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            if (!this.isUpdate) {
              this.$router.go(0);
            }
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    }
    /* 更新visible */
  },
  watch: {
    drawerEditBoolen (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.data);
          if (this.data) {
            this.form.id = '';
            this.$util.assignObject(this.form, {
              ...this.data
            });

            if (this.form.loopPicture) {
              let markIndex = this.form.loopPicture.lastIndexOf('.');
              let suffix = this.form.loopPicture.substring(markIndex);
              if (!this.fileList.length) {
                this.fileList.push({
                  name: suffix,
                  url: this.form.loopPicture
                });
              }
            } else {
              this.fileList = [];
            }

            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form);
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
